

<template>
  <Header></Header>
  <div class="details">
    <div>
      <img :src="img">
    </div>
    <div class="page-layout">
      <Sidebar @sidebar-click="handleSidebarClick">
        <template #title>
          <span>知识中枢</span>
        </template>
      </Sidebar>
      <div class="main-content">
        <!-- 首页内容 -->
        <div class="content-section" :class="activeKey===0 && 'active'" id="home">
          <h2 class="page-title">知识中枢</h2>
          <p class="page-subtitle">汇聚行业知识精华，构建智能化知识服务体系</p>

          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="知识中枢" class="intro-image">

          <div class="content-text">
            <p>知识中枢是创新服务平台的核心知识基础设施，集成了行业知识库、专家资源库和智能问答系统，为企业、科研机构和政府部门提供全方位的知识服务支持。</p>
            <p>中枢汇聚了超过100万篇行业文献、50万项专利数据、10万份技术报告和5千位行业专家资源，通过人工智能技术实现知识的智能检索、关联分析和应用推荐。</p>
            <p>知识中枢采用多模态知识图谱技术，将结构化数据和非结构化文本深度融合，构建了覆盖多个领域的知识网络，为用户提供精准、高效的知识服务。</p>
          </div>

          <h3>核心资源</h3>
          <div class="knowledge-resources">
            <div class="resource-card">
              <div class="resource-icon">📚</div>
              <h3>行业知识库</h3>
              <p>涵盖科技、经济、产业等多个领域的专业文献、研究报告和技术标准</p>
            </div>

            <div class="resource-card">
              <div class="resource-icon">🧑&zwj;💻</div>
              <h3>专家资源库</h3>
              <p>汇集各领域专家学者，提供咨询、评审和技术支持服务</p>
            </div>

            <div class="resource-card">
              <div class="resource-icon">🔍</div>
              <h3>智能检索系统</h3>
              <p>基于自然语言处理的智能搜索，精准匹配用户知识需求</p>
            </div>

            <div class="resource-card">
              <div class="resource-icon">📊</div>
              <h3>数据分析平台</h3>
              <p>提供数据可视化、趋势分析和知识发现工具</p>
            </div>
          </div>
        </div>

        <!-- 建设概况内容 -->
        <div class="content-section" :class="activeKey===1 && 'active'" id="construction">
          <h2 class="page-title">建设概况</h2>
          <p class="page-subtitle">知识中枢的发展历程与建设成果</p>

          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="知识中枢建设" class="intro-image">

          <div class="content-text">
            <p>知识中枢于2022年启动建设，总投资3亿元人民币，是区域规模最大、知识资源最丰富的公共知识服务平台。</p>
            <p>
              中枢建设分为三个阶段：一期工程（2022-2023年）完成了基础平台搭建和核心知识库建设；二期工程（2023-2024年）实现了多模态知识融合和智能服务升级；三期工程（2024-2025年）将重点打造行业垂直知识库和专家协同网络。
            </p>
            <p>目前，知识中枢已整合了来自100多个数据源的知识资源，构建了20多个领域的知识图谱，服务用户超过10万人，日均知识检索量超过5万次。</p>
          </div>

          <h3>技术架构</h3>
          <div class="feature-grid">
            <div class="feature-card">
              <h3>知识采集层</h3>
              <p>多渠道、多来源的知识采集系统，支持结构化数据和非结构化文本的自动化采集</p>
            </div>

            <div class="feature-card">
              <h3>知识处理层</h3>
              <p>基于NLP的知识抽取、清洗和标准化处理，构建高质量知识库</p>
            </div>

            <div class="feature-card">
              <h3>知识存储层</h3>
              <p>分布式知识图谱数据库，支持大规模知识的高效存储和检索</p>
            </div>

            <div class="feature-card">
              <h3>知识应用层</h3>
              <p>智能问答、知识推荐和可视化分析等多样化知识服务</p>
            </div>
          </div>
        </div>

        <!-- 政策资讯内容 -->
        <div class="content-section" :class="activeKey===2 && 'active'" id="policy">
          <h2 class="page-title">政策资讯</h2>
          <p class="page-subtitle">关于知识中枢的相关政策和支持措施</p>

          <div class="policy-list">
            <div class="policy-item">
              <h3>《关于促进知识中枢发展的指导意见》</h3>
              <p>发布部门：市科技局、市教委 | 发布时间：2025年2月18日</p>
              <p>该意见提出了加强知识资源整合、推动知识共享应用、培育知识服务产业等8个方面的政策措施。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>

            <div class="policy-item">
              <h3>《知识中枢资源共享管理办法》</h3>
              <p>发布部门：市大数据局 | 发布时间：2025年4月5日</p>
              <p>办法明确了知识资源共享的范围、方式和激励机制，促进知识资源的高效流通和价值释放。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>

            <div class="policy-item">
              <h3>《知识中枢专家库建设实施方案》</h3>
              <p>发布部门：市人社局 | 发布时间：2025年5月12日</p>
              <p>方案提出了专家资源整合、评价激励和协同服务机制，打造高水平的专家支持体系。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>
          </div>
        </div>

        <!-- 活动报道内容 -->
        <div class="content-section" :class="activeKey===3 && 'active'" id="activity">
          <h2 class="page-title">活动报道</h2>
          <p class="page-subtitle">知识中枢相关活动与新闻报道</p>

          <div class="news-list">
            <div class="news-item">
              <div class="news-date">2025-06-15</div>
              <div class="news-content">
                <h3><a href="javascript:;">知识中枢与10所高校共建联合知识库</a></h3>
                <p>知识中枢与本地10所重点高校签署合作协议，共建学科知识库，共享教学科研资源。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-05-22</div>
              <div class="news-content">
                <h3><a href="javascript:;">知识中枢二期工程正式上线</a></h3>
                <p>知识中枢二期工程完成升级，新增智能问答和知识推荐功能，服务能力大幅提升。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-04-10</div>
              <div class="news-content">
                <h3><a href="javascript:;">知识中枢荣获"最佳知识服务平台"奖</a></h3>
                <p>在2025中国数字服务大会上，知识中枢荣获"最佳知识服务平台"奖项。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-03-05</div>
              <div class="news-content">
                <h3><a href="javascript:;">知识中枢用户突破10万人</a></h3>
                <p>知识中枢注册用户数突破10万大关，日均活跃用户超过1万人。</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 服务介绍内容 -->
        <div class="content-section" :class="activeKey===4 && 'active'" id="service">
          <h2 class="page-title">服务介绍</h2>
          <p class="page-subtitle">知识中枢提供的各类知识服务</p>

          <div class="service-list">
            <div class="service-item">
              <h3>知识检索服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="知识检索" class="service-image">
                <div class="service-text">
                  <p>提供智能化的知识检索服务，支持关键词搜索、语义检索和问答式搜索等多种方式。我们的检索系统基于深度学习技术，能够准确理解用户意图，返回最相关的知识内容。</p>
                  <p>服务特点：多模态检索、语义理解、个性化推荐</p>
                  <p>适用场景：科研文献检索、技术方案查询、政策法规查找等</p>
                </div>
              </div>
            </div>

            <div class="service-item">
              <h3>专家咨询服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="专家咨询" class="service-image">
                <div class="service-text">
                  <p>连接各领域专家资源，为用户提供专业咨询服务。通过在线问答、视频咨询和线下服务等多种形式，解决用户的专业问题。</p>
                  <p>服务特点：多领域专家、灵活服务方式、快速响应</p>
                  <p>适用场景：技术难题解决、项目评审、专业培训等</p>
                </div>
              </div>
            </div>

            <div class="service-item">
              <h3>知识图谱服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="知识图谱" class="service-image">
                <div class="service-text">
                  <p>提供行业知识图谱构建和应用服务，帮助用户梳理领域知识体系，发现知识关联和价值。</p>
                  <p>服务特点：领域定制、可视化展示、智能分析</p>
                  <p>适用场景：企业知识管理、学科体系建设、技术路线规划等</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
import {ref} from "vue";
import img from '@/assets/img/static/fnpt_zszs.png'

const activeKey = ref(0)

const handleSidebarClick = ( key ) => {
  console.log( key );
  activeKey.value=key
}

</script>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-layout{
  display: flex;
  margin-top: 20px;
}
.main-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

.page-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #1e5799;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.intro-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.content-text {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.feature-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.1);
}

.feature-card h3 {
  font-size: 18px;
  color: #1e5799;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 14px;
  color: #666;
}

.news-list {
  margin-top: 30px;
}

.news-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e0e9ff;
}

.news-date {
  width: 100px;
  color: #207cca;
  font-weight: bold;
}

.news-content {
  flex: 1;
}

.news-content h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.news-content p {
  color: #666;
  font-size: 14px;
}

.news-content a {
  color: #1e5799;
  text-decoration: none;
}

.news-content a:hover {
  text-decoration: underline;
}

.service-list {
  margin-top: 30px;
}

.service-item {
  margin-bottom: 30px;
}

.service-item h3 {
  font-size: 20px;
  color: #1e5799;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.service-content {
  display: flex;
  margin-bottom: 20px;
}

.service-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.service-text {
  flex: 1;
  font-size: 15px;
  color: #555;
  line-height: 1.8;
}

.policy-list {
  margin-top: 30px;
}

.policy-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9fbff;
  border-radius: 8px;
  border-left: 4px solid #207cca;
}

.policy-item h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #1e5799;
}

.policy-item p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.policy-item a {
  color: #207cca;
  text-decoration: none;
  font-size: 14px;
}

.knowledge-resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.resource-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s;
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.1);
}

.resource-icon {
  font-size: 36px;
  color: #207cca;
  margin-bottom: 15px;
}

.resource-card h3 {
  font-size: 18px;
  color: #1e5799;
  margin-bottom: 10px;
}

.resource-card p {
  font-size: 14px;
  color: #666;
}
</style>